<!-- 添加文章 -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>焦点学苑</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/style.css">
    <script type="text/javascript" src="/js/vue2.6.14.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
</head>
<script>
    function changeto (url) {
        window.location.href = url;
    }
</script>

<body>
    <div class="head-box">
        <div class="head wrap">
            <div class="logo fl"><a href=""><img src="/images/logo.png"></a></div>
            <div class="head-right fr">
                <div class="head-a fr">
                    <div class="hgt fl"><img src="/images/hgt.png">
                        <div class="hgt-top">
                            <input type="text" class="hgt-text">
                        </div>
                    </div>
                    <div class="head-a1 fl"><a href=""><img src="/images/tb-a.png"></a></div>
                    <div class="head-a1 fl"><a href=""><img src="/images/tb-b.png"></a></div>
                    <!-- <div class="head-a3 login-click fl">登录</div>
                    <div class="head-a4 reg-click fl">注册</div> -->
                    <span>
                        <div class="head-a4 fl">
                            <select name="" id="" class="head-a3" onchange="changeto($(this).val())">
                                <option value="" checked>我的</option>
                                <option value="/article-add.html"><a href="/blog/user/add.to"> 发表文章</a></option>
                                <option value="/ainArticleList"><a>我的作品</a></option>
                                <option value="/userConcernList"><a>我的收藏</a></option>
                                <option value="/logout"><a>注销</a></option>
                            </select>
                        </div>
                    </span>

                </div>
                <div class="clearfix"></div>
                <div class="nav fr">
                    <ul>
                        <li><a href="/">首页</a></li>
                        <li><a href="/article.html">文章</a>
                            <div class="sub-nav">
                                <div class="bich-top"></div>
                                <div class="bich">
                                    <a href="">服饰</a>
                                    <a href="">美食</a>
                                    <a href="">出行</a>
                                    <a href="">约会</a>
                                </div>

                            </div>
                        </li>
                        <li><a href="community.html">社区</a></li>
                        <li><a href="course.html">课程</a></li>
                        <li><a href="active.html">活动</a></li>
                        <li class="nav-cut"><a href="contact.html">联系我们</a></li>

                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="about-banner"><img src="/upload/about-banner.jpg"></div>

        <div class="about-box">
            <div class="about">
                <div class="about-h4">发布博客</div>
            </div>
            <div class="about-btm">

                <form action="/blog/user/add.do" method="post" enctype="multipart/form-data" id="form">
                    <div class="tsm-box">
                        <div class="tsm-title">博客内容
                        </div>
                        <div class="tsm-a" style="display:block;">
                            <div class="tsm-a1" id="">
                                <div class="tsm-a2 fl">标题：</div>
                                <div class="tsm-a3"><input type="text " id="title" class="tsm-text1" v-model="title"
                                        onfocus="$(this).next().html('')"><span id="nameError" :text="nameError"
                                        style="color: red">{{nameError}}</span></div>
                            </div>
                            <div class="tsm-a1">
                                <div class="tsm-a2 fl">封面：</div>
                                <img src="" alt="未选择图片" height="100px" width="100px" id="img" style="display:none">
                                <label id="aa" for="imgUrl">
                                    <span class="btn"
                                        style="width: 100px;height: 30px;font-size: 12px;border-width: 1px"
                                        id="ss">选择图片</span>
                                    <input type="file" id="imgUrl" @change="getFile($event)" style="display: none"
                                        onclick="$(this).next().html('')">
                                    <p style="color: red" :text="imgError" id="imgError">{{imgError}}</p>
                                </label>
                            </div>
                            <div class="tsm-a1">
                                <div class="tsm-a2 fl">关键字：</div>
                                <div class="tsm-a3"><input id="keywords" type="text" class="tsm-text1"
                                        v-model="keywords"></div>
                            </div>

                            <div class="tsm-a1">
                                <div class="tsm-a2 fl">分类：</div>
                                <div class="tsm-a3">
                                    <select id="typeId" class="tsm-text1" v-model="typeId"
                                        onfocus="$(this).next().html('')">
                                        <option value="" selected>选择分类</option>
                                        <option v-for="type  in  typeData" :value="type.cid">{{type.typename}}</option>
                                    </select>
                                    <span id="typeError" :text="typeError" style="color: red">{{typeError}}</span>
                                </div>
                            </div>

                            <div class="tsm-a1">
                                <div class="tsm-a2 fl">文章内容：</div>
                                <div class="tsm-a5"><textarea id="bContent" class="tsm-area" v-model="content"
                                        onfocus="$(this).next().html('')"></textarea><span id="contError"
                                        style="color: red">{{contError}}</span></div>
                            </div>
                        </div>
                    </div>

                    <div class="tsm-href"><input type="button" id="btn" class="tsm-btn" value="保存"
                            @click="submitForm($event)"></div>
                </form>
            </div>
        </div>

    </div>


    <div class="footer">
        <div class="wrap">
            <div class="foot">
                <div class="foot-left fl">
                    <a href="">关于我们</a>
                    <a href="">加入我们</a>
                    <a href="contact.html">联系我们</a>
                    <a href="">媒体采访</a>
                </div>
                <div class="foot-c fl"><a href=""><img src="images/foot-logo.jpg"></a></div>
                <div class="foot-right fr">
                    <a href="">同城活动</a>
                    <a href="">课程资讯</a>
                    <a href="">最新发布</a>
                    <a href="">热门文章</a>
                </div>
            </div>
            <div class="foot-btm">网页制作by云邦</div>
        </div>
    </div>


    <!--登录注册弹窗-->
    <div class="mask"></div>
    <div class="login">
        <div class="login-title">
            <div class="login-a">登录</div>
            <div class="login-b"></div>
            <div class="login-c close">x</div>
        </div>
        <div class="login-btm">
            <div class="login-d"><input type="text" class="login-text" placeholder="注册时填写的邮箱"></div>
            <div class="login-d"><input type="password" class="login-pas" placeholder="密码"></div>
            <div class="login-d"><input type="button" class="login-btn" placeholder="登录"></div>
            <div class="login-f">
                <a href="">忘记密码</a>
                <span>还没有焦点账号?><a href="javascript:;" class="reg-href">点击注册</a></span>
            </div>
        </div>
    </div>

    <div class="reg">
        <div class="login-title">
            <div class="login-a">注册</div>
            <div class="login-b"></div>
            <div class="login-c close">x</div>
        </div>
        <div class="login-btm">
            <div class="login-d"><input type="text" class="login-text" placeholder="邮箱/手机号"></div>
            <div class="login-d"><input type="password" class="login-pas" placeholder="密码"></div>
            <div class="login-d"><input type="button" class="login-btn" placeholder="注册"></div>
            <div class="login-f">
                <a href="">忘记密码</a>
            </div>
        </div>
    </div>

    <script src="/js/jquery-1.11.1.min.js"></script>
    <script src="/js/Action.js"></script>
    <script>
        //选择头像后回显的方法
        $("#imgUrl").change(function () {
            var file = $(this)[0].files[0];
            var fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = function () {
                $("#img").prop("src", this.result).css("display", "inline-block")
            }
        })
        // $(function () {
        //
        //     $("#btn").click(function(){
        //         var aa=0
        //         if($("#title").val()==''){
        //             $("#nameError").html("输入文章标题")
        //             aa=1
        //         }
        //         if($("#bContent").val()==''){
        //
        //             $("#contError").html("文章内容不能为空")
        //             aa=1
        //         }
        //
        //         if($("#typeId").val()==''){
        //             $("#typeError").html("选择文章类型")
        //             aa=1
        //         }
        //         if($("#imgUrl").val()==''){
        //             $("#imgError").html("请选择文章图片")
        //             aa=1
        //         }
        //         if(aa==0){
        //             if(   $("#keywords").val()==''){
        //                   if(!confirm("确认不设置关键字")){
        //                       aa=1
        //                   }
        //
        //             }
        //         }
        //
        //         if(aa==0){
        //
        //             $("#form").submit();
        //
        //         }
        //     })

        // })
        var vm = new Vue({
            el: "#form",
            data: {
                title: '',
                keywords: '',
                typeId: '',
                content: '',
                file: null,
                typeData: [],
                nameError: '',
                typeError: '',
                imgError: '',
                contError: ''
            },
            created () {
                this.selectType();
            },
            methods: {
                selectType () {
                    axios.get("/blog/user/add.to").then(function (obj) {
                        vm.typeData = obj.data.types;
                    }).cache(function (error) {
                        alert(error)
                    })
                },
                getFile: function (event) {
                    this.file = event.target.files[0]
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(this.file);
                    fileReader.onload = function () {
                        $("#img").prop("src", fileReader.result).css("display", "inline-block")
                    }

                },
                submitForm: function (event) {
                    var aa = 0
                    if (this.title == '') {
                        this.nameError = "用户名不能为空"
                        aa = 1
                    }
                    if (this.typeId == '') {
                        this.typeError = "请选择文章类型"
                        aa = 1
                    }
                    if (this.file == null) {
                        this.imgError = "文章图片不能为空"
                        aa = 1
                    }
                    if (this.content == '') {
                        this.contError = "文章内容部不能为空"
                        aa = 1
                    }
                    if (aa == 0) {
                        if (this.keywords == '') {
                            if (!confirm("确定不加关键字这将影响文章可见度")) {
                                a == 1
                            }
                        }
                        if (aa == 0) {
                            var formData = new FormData();
                            formData.append("title", this.title)
                            formData.append("content", this.content)
                            formData.append("typeid", this.typeId)
                            formData.append("imgUrl", this.file)
                            formData.append("keywords", this.keywords)
                            axios.post("/blog/user/add.do", formData).then(function (obj) {
                                if (obj.status == 200) {
                                    window.location.href = "/ainArticleList"
                                    return false;
                                }
                                alert(obj.data.msg)
                            }).cache(function (error) {
                                alert(error)
                            })


                        }

                    }

                }



            }




        })
    </script>
</body>

</html>